<template>
  <p>Home</p>
  <p>ref</p>
  <p>{{ count }}</p>
  <p>{{ test }}</p>
  <p>reactive</p>
  <p>obj :: {{ obj }}</p>
  <p>obj.name :: {{ obj.name }}</p>
  <p>obj.age :: {{ obj.age }}</p>
  <P>arr: {{ arr }}</P>
  <p>arr :: {{ arr[0] }}</p>
  <P>computed==========</P>
  <P>countAddFive:{{ countAddFive }}</P>
  <p>methods =======</p>
  <button @click="countAddOne">count 加1</button>
  <button @click="countAddTwo">count 加2</button>
  <button @click="updatedObj">更新obj</button>


  <p>组件</p>
  <Son :foo="obj.name" :age="obj.age"></Son>
</template>

<script>
import { ref, reactive,computed,watch } from "vue";
import Son from "./Son.vue"

export default {
components:{
   Son

},
  setup() {
      //定义 data
      const count = ref(0)
      const test =ref('hello world')

      console.log(count.value)

      //recative
      const obj = reactive({
          name: 'tom',
          age:12
      })

      const arr = [1, 2, 3, 4]

      console.log('obj.name',obj.name)

      // computed
      // eslint-disable-next-line no-unused-vars
      const countAddFive = computed(() => {
          return count.value +5
      })


      //methods
      function countAddOne() {
          count.value++
      }
  
      const countAddTwo = () => {
          count.value += 2
      }

      const updatedObj = () => {
          updatedObjName()
      }

      const updatedObjName = () => {
         obj.name = 'jerry'
      }

      // watch
      watch(count, (newVal,oldVal) => {
          console.log('count 改变了');
          console.log('newVal',newVal);
          console.log('oldVal',oldVal)
     })

      watch(countAddFive, (newVal,oldVal) => {
          console.log('countAddFive 改变了');
          console.log('newVal',newVal);
          console.log('oldVal',oldVal)
      })
      watch(obj, (newVal,oldVal) => {
          console.log('obj 改变了');
          console.log('newVal',newVal);
          console.log('oldVal',oldVal)
      })

      watch(()=> obj.name, (newVal,oldVal) => {
          console.log('obj.name 改变了');
          console.log('newVal',newVal);
          console.log('oldVal',oldVal)
      })
      
      return {
      count,
      test,
      obj,
      arr,
      countAddFive,
      countAddOne,
      countAddTwo,
      updatedObj
      }
   }
}

</script>